<template>
  <a-layout class="layout">
    <!-- 左侧导航栏 -->
    <a-layout-sider width="200" class="sider">
      <div class="logo">Wecho</div>
      <a-menu v-model:selectedKeys="selectedKeys" mode="inline" class="side-menu">
        <a-menu-item key="home" @click="$router.push('/')">
          <home-outlined />
          <span>主页</span>
        </a-menu-item>
        <a-menu-item key="tags">
          <number-outlined />
          <span>标签</span>
        </a-menu-item>
        <a-menu-item key="notification">
          <bell-outlined />
          <span>通知</span>
        </a-menu-item>
        <a-menu-item key="bookmarks">
          <book-outlined />
          <span>书签</span>
        </a-menu-item>
        <a-menu-item key="profile" v-if="authStore.isLoggedIn" @click="handleProfileClick">
          <user-outlined />
          <span>我的</span>
        </a-menu-item>
      </a-menu>
      <a-button v-if="!authStore.isLoggedIn" type="default" class="login-button" @click="showLoginModal = true">
        <login-outlined />
        <span>登录</span>
      </a-button>
      <login-modal v-model:visible="showLoginModal" @login-success="handleLoginSuccess" />
    </a-layout-sider>

    <!-- 中间内容区 -->
    <a-layout-content class="content">
      <slot></slot>
    </a-layout-content>

    <!-- 右侧趋势区 -->
    <a-layout-sider width="300" class="right-sider">
      <div class="search-box">
        <a-input-search placeholder="搜索..." />
      </div>
      <div class="trend-section">
        <h3>最新趋势</h3>
        <a-list size="small">
          <a-list-item v-for="i in 5" :key="i">
            <a-list-item-meta>
              <template #title>
                <a href="#">#标签{{i}}</a>
              </template>
              <template #description>
                {{239 - i * 12}}个讨论
              </template>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
      <a-button type="primary" class="post-button">
        <plus-outlined />
        发布
      </a-button>
    </a-layout-sider>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {
  HomeOutlined,
  NumberOutlined,
  BellOutlined,
  BookOutlined,
  UserOutlined,
  PlusOutlined,
  LoginOutlined
} from '@ant-design/icons-vue';
import LoginModal from './LoginModal.vue';
import { useAuthStore } from '../store/auth';
import { getUserInfo } from '../api/user';

const router = useRouter();
const authStore = useAuthStore();
const selectedKeys = ref(['home']);
const showLoginModal = ref(false);

const handleLoginSuccess = () => {
  showLoginModal.value = false;
};

const handleProfileClick = async () => {
  try {
    await getUserInfo();
    router.push('/me');
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};
</script>

<style scoped>
.layout {
  min-height: 100vh;
}

.sider {
  background: #fff;
  position: fixed;
  left: 0;
  height: 100vh;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.login-button {
  margin: 8px 8px 24px;
  padding: 0 24px;
  width: calc(100% - 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border: none;
  height: 40px;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.3s;
}

.login-button:hover {
  background: #e0e0e0;
  color: #6893AC;
}

.logo {
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #95C7E0;
}

.side-menu {
  border-right: none;
}

.post-button {
  width: 80%;
  margin: 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6893AC;
  border-color: #6893AC;
  height: 32px;
  font-size: 14px;
  padding: 0 12px;
  transition: all 0.3s;
}

.post-button:hover {
  background: #6893AC;
  color: #fff;
}

.content {
  margin-left: auto;
  padding: 24px;
  overflow-y: auto;
}

.right-sider {
  position: fixed;
  right: 0;
  height: 100vh;
  background: #fff;
  padding: 24px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.05);
}

.search-box {
  margin-bottom: 24px;
}

.trend-section {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.trend-section h3 {
  margin-bottom: 16px;
  color: #00b96b;
}
</style>